<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小鹿线-学习路线</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/Normalize.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/learning.css">



</head>

<body>
    <div class="container">
        <header>
            <div class="h-search">
                <i class="iconfont icon-fangdajing_huaban1"></i>
                <form action="" id="goSearch" onsubmit="return false">
                    <input type="text" placeholder="搜索课程名称和关键词" class="h-inp" name="" id="">
                </form>
            </div>
        </header>
        <section>
            <ul>
              
            </ul>
        </section>
        <footer>
            <ul>
                <li>
                    <a href="./index.html">

                        <img src="./img/icon_tab_sy_n@2x.png" alt="首页">
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="./curriculum.html">
                        <img src="./img/icon_tab_zxkc_n@2x.png" alt="在线课程">
                        <span>在线课程</span>
                    </a>
                </li>
                <li>
                    <a href="./learning.html">

                        <img src="./img/icon_tab_xxlj_s@2x.png" alt="学习路线">
                        <span>学习路线</span>
                    </a>
                </li>
                <li>
                    <a href="./about.html">
                        <img src="./img/icon_tab_gywm_n@2x.png" alt="关于我们">
                        <span>关于我们</span>
                    </a>
                </li>
            </ul>
        </footer>
    </div>

    <script src="./js/flexible.js"></script>
    <script src="./js/zepto.min.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script>
        $(function () {
            // 页面数据
            var page = 1;

            var result = '';
            fAjax(page);
            // 发送请求封装函数
            function fAjax(page, value) {
                $.ajax({
                    url: `http://39.101.217.150:8075/course/list`,
                    type: 'get',
                    data: {
                        page: 1,
                        size: 12,
                        name:value
                    },
                    success: function (data) {
                        var records = data.data.records;
                        if (records.length) {
                            $.each(records, function (index, item) {
                                result += `
                                <li>
                                    <h3>${item.name}</h3>
                                    <p>${item.courseContent}</p>
                                    <div>
                                        <a href="${item.courseUrl}">立即学习</a>

                                    </div>
                                </li>
                                <li>
                                    <h3>${item.name}</h3>
                                    <p>${item.courseContent}</p>
                                    <div>
                                        <a href="${item.courseUrl}">立即学习</a>

                                    </div>
                                </li>

                              `
                                $('section ul').html(result)
                            })
                        }
                    }
                })
            }
            // 触底加载函数
            $('section').scroll(function () {
                var scrollTop = $(this).scrollTop();
                var clienth = $(this).height();

                var ulH = $('section ul').height()
                if (scrollTop + clienth > ulH) {
                    fAjax(page++)
                }
            })
            //  键盘事件的添加
            $('#goSearch').on('keypress', function (e) {
                var keyCode = e.keyCode;
                if (keyCode == '13') {
                    // 点击了搜索按钮
                    var value = $(this).find('input').val();
                    result = '';
                    page = 1;
                    fAjax(page, value)
                    document.activeElement.blur();

                }

            })
            // 点击空白区域实现收起键盘操作
            window.addEventListener('touchstart', function () {
                document.activeElement.blur();

            }, false)
        })
    </script>
</body>

</html>